<template>
  <div @mouseover="pauseScroll" @mouseout="scrollFun(config)">
    <a-table :columns="columns" :data-source="data" :scroll="{ y: config.rowHeight * 4 }" id="aTable" class="tableA" :pagination="false">
      <template slot="action">
        <a-button type="primary" size="small">
          删除
        </a-button>
      </template>
    </a-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '名字',
          dataIndex: 'name',
          key: 'name',
        },{
          title: '地址',
          dataIndex: 'address',
          key: 'address',
        },{
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          fixed: 'right',
          width: 100,
        },
      ],
      data: [
        {
          name: '黄洁权1',
          address: '中山五路汇智大厦'
        },{
          name: '黄洁权2',
          address: '中山五路汇智大厦'
        },{
          name: '黄洁权3',
          address: '中山五路汇智大厦'
        },{
          name: '黄洁权4',
          address: '中山五路汇智大厦'
        },{
          name: '黄洁权5',
          address: '中山五路汇智大厦'
        },{
          name: '黄洁权6',
          address: '中山五路汇智大厦'
        },{
          name: '黄洁权7',
          address: '中山五路汇智大厦'
        },{
          name: '黄洁权8',
          address: '中山五路汇智大厦'
        },{
          name: '黄洁权9',
          address: '中山五路汇智大厦'
        },{
          name: '黄洁权10',
          address: '中山五路汇智大厦'
        }
      ],
      config: {
        scrollTimer: null,
        clock: 0,
        id: 'aTable', //id
        rowHeight: 45,  //行高
        single: false,  //单步运动
        waitTime: 2,  //等待时间
      }
    }
  },
  created() {

  },
  mounted() {
    this.scrollFun(this.config)
  },
  beforeDestroy(){
    this.pauseScroll()  //销毁定时器
  },
  methods: {
    scrollFun(config) {
      function timerOut() {
        let time = 0

        if(config.single == true) {
          time = config.waitTime * 1000
        } else {
          time = config.waitTime * 10
        }
        return time
      }

      this.config.scrollTimer = setInterval(() => {
        const scrollTop = document.getElementById(config.id).getElementsByClassName('ant-table-body')[0].scrollTop
        const scrollHeight = document.getElementById(config.id).getElementsByClassName('ant-table-body')[0].scrollHeight
        const clientHeight = document.getElementById(config.id).getElementsByClassName('ant-table-body')[0].clientHeight
        const scroll = scrollHeight - clientHeight

        // document.getElementById(config.id).querySelectorAll('.ant-table-fixed-header .ant-table-body-inner')[0].style.overflowX = 'hidden'

        if(scrollTop < scroll) {
          this.config.clock++
          if(config.single == true) {
            document.getElementById(config.id).getElementsByClassName('ant-table-body')[0].scrollTop = config.rowHeight * this.config.clock
          } else {
            document.getElementById(config.id).getElementsByClassName('ant-table-body')[0].scrollTop = this.config.clock
          }
        } else {
          this.config.clock = 0
          document.getElementById(config.id).getElementsByClassName('ant-table-body')[0].scrollTop = 0
        }
      }, timerOut())
    },
    pauseScroll() {
      // 定时器不为空
      if (this.config.scrollTimer) {
        // 清除定时器
        clearInterval(this.config.scrollTimer)
        this.config.scrollTimer = null
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/#aTable .ant-table-fixed-header .ant-table-body-inner{
  overflow-x: hidden;
}

/deep/.tableA {
  .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,.ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td{
    background: #8df6ff;
    color: #001f46;
  }

  .ant-table-header {
    background: linear-gradient(0deg, #05334D, #0E5176, #008EAC);

    table {
      tr {
        th {
          padding: 12px 16px;
          color: #7CFFFA;
          background: linear-gradient(0deg, #05334D, #0E5176, #008EAC);
          border-bottom: none;
        }
      }
    }
  }

  .ant-table-body {
    table {
      tr {
        td {
          border-bottom: 1px solid #016486;
          background: #052145;
          color: #fff;
          padding: 10px 16px;
        }
      }
    }
  }

  .ant-table-fixed-right table{
    background: none;
  }

  .ant-table-fixed-right {
    height: 100%;

    .ant-table-body-inner{
      table {
        tr {
          td {
            border-bottom: 1px solid #016486;
            color: #fff;
            padding: 10px 16px;
          }
        }
      }
    }
  }
}
</style>